import React, { Component } from "react";
import { connect } from "react-redux";
import { actions } from "./_index.js";
class View extends Component {
  constructor(props) {
    super(props);
  }
  lists() {
    const list = this.props.data.map((val, key) => {
      return (
        <li key={key}>
          <span>{val.text}</span>
        </li>
      );
    });
    return list;
  }
  render() {
    const { onAdd, data } = this.props;
    // console.log(data)
    return (
      <React.Fragment>
        <div onClick={onAdd}>点我点</div>
        <ul>{data.length !== 0 ? this.lists() : ""}</ul>
      </React.Fragment>
    );
  }
}

//需要渲染什么数据
//作为函数，mapStateToProps执行后应该返回一个对象
function mapStateToProps(state) {
  return {
    data: state.first,
  };
}
//是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onAdd: () => dispatch(actions.add("id")),
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(View);
